<!DOCTYPE html><html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3层汉诺塔演示</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Microsoft Yahei';
            background: #f0f0f0;
            padding: 20px;
        }
        .tower-container {
            display: flex;
            justify-content: space-between;
            width: 800px;
            height: 300px;
            position: relative;
            margin-bottom: 30px;
        }
        .tower {
            width: 200px;
            height: 10px;
            background: #333;
            position: relative;
            top: 290px;
        }
        .disk {
            width: 120px;
            height: 20px;
            background: #ff6b6b;
            border-radius: 4px;
            position: absolute;
            transition: all 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        .disk:nth-child(2) {
            width: 160px;
            background: #ffa502;
        }
        .disk:nth-child(3) {
            width: 200px;
            background: #2ecc71;
        }
        .step {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>3层汉诺塔演示</h1>
    <div class="tower-container">
        <div class="tower" id="tower0">
            <div class="disk" data-size="3" style="top: 240px; left: 40px;">3</div>
            <div class="disk" data-size="2" style="top: 260px; left: 20px;">2</div>
            <div class="disk" data-size="1" style="top: 280px; left: 0px;">1</div>
        </div>
        <div class="tower" id="tower1"></div>
        <div class="tower" id="tower2"></div>
    </div>
    <div class="step" id="stepDisplay">点击开始演示</div>

    <script>
        const towers = [[3, 2, 1], [], []];
        const towerElements = [
            document.getElementById('tower0'),
            document.getElementById('tower1'),
            document.getElementById('tower2')
        ];
        let stepCount = 0;
        const stepDisplay = document.getElementById('stepDisplay');

        function getTopDisk(towerIndex) {
            const tower = towers[towerIndex];
            return tower[tower.length - 1];
        }

        function moveDisk(from, to) {
            const disk = towers[from].pop();
            towers[to].push(disk);
            
            // 创建动画元素
            const diskElements = Array.from(document.querySelectorAll('.disk'));
            const movingDisk = diskElements.find(el => 
                el.dataset.size == disk && 
                el.parentElement.id === `tower${from}`
            );
            
            if (movingDisk) {
                const targetTower = towerElements[to];
                const towerRect = targetTower.getBoundingClientRect();
                const towerTop = towerElements[0].getBoundingClientRect().top;
                const diskHeight = 20;
                const diskIndex = towers[to].length - 1;
                
                movingDisk.style.transition = 'all 0.5s ease';
                movingDisk.style.left = `${(towerElements[to].offsetWidth - movingDisk.offsetWidth) / 2}px`;
                movingDisk.style.top = `${towerTop - towerElements[0].offsetTop - (diskIndex * diskHeight)}px`;
                
                // 更新位置
                setTimeout(() => {
                    targetTower.appendChild(movingDisk);
                }, 500);
            }
            
            stepCount++;
            stepDisplay.textContent = `步骤 ${stepCount}: 将圆盘 ${disk} 从柱子 ${from+1} 移动到柱子 ${to+1}`;
        }

        function hanoi(n, from, to, via) {
            if (n > 0) {
                return [
                    ...hanoi(n-1, from, via, to),
                    [from, to],
                    ...hanoi(n-1, via, to, from)
                ];
            }
            return [];
        }

        async function startAnimation() {
            const moves = hanoi(3, 0, 2, 1);
            stepCount = 0;
            stepDisplay.textContent = '演示开始';
            
            for (const [from, to] of moves) {
                moveDisk(from, to);
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
            
            stepDisplay.textContent = '演示完成！总共 ' + stepCount + ' 步';
        }

        // 自动开始演示
        window.onload = () => {
            setTimeout(startAnimation, 1000);
        };
    </script>
</body>
</html>